import React from 'react'
import { Layout, Menu ,Avatar,Dropdown ,Badge ,message} from 'antd';
import "./style.css"
import {
  MenuUnfoldOutlined,
  MenuFoldOutlined
} from '@ant-design/icons';

import { withRouter } from 'react-router-dom'
import { AdminRoutes } from "../../routes"


const navRoutes = AdminRoutes.filter((el)=>el.isNav)
// 过滤 得到 侧边栏
const { Header, Sider, Content } = Layout;


class Admin extends React.Component {
  state = {
    collapsed: false,
  };

  toggle = () => {
    this.setState({
      collapsed: !this.state.collapsed,
    });
  };

  render() {
    const {history} = this.props;
	const menu = (
	  <Menu>
	    <Menu.Item>
			<Badge dot={true}>
				消息
			</Badge>
		</Menu.Item>
		<Menu.Item>设置</Menu.Item>
		<Menu.Item onClick={ 
			()=>{
				// 退出登录
				localStorage.removeItem("token")
				message.info("退出登录")
				history.push("/login");
			}
		}>退出登录</Menu.Item>
	  </Menu>
	)
    return (
     <div id="myadmin">
        <Layout>
        <Sider trigger={null} collapsible collapsed={this.state.collapsed}>
          <div className="logo" />
          <Menu 
          onClick={ (obj)=>{
            history.push("/admin"+obj.key)
          } }
          theme="dark" 
          mode="inline" 
          defaultSelectedKeys={['1']}>
            
            {
              navRoutes.map(nav=>{
                return (
                  <Menu.Item key={nav.path} icon={<nav.icon />}>
                    { nav.title }
                  </Menu.Item>
                )
              })
            }    
          </Menu>
        </Sider>
        <Layout className="site-layout">
          <Header className="site-layout-background" style={{ padding: 0 }}>
            {React.createElement(this.state.collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
              className: 'trigger',
              onClick: this.toggle,
            })}
			<div className="user">
			  <Dropdown overlay={menu}>
				<div>
					<Avatar src={ this.props.avatar }/>
					<span className="user-name">{this.props.userName}</span>
				</div>
			  </Dropdown>
			</div>
          </Header>
          <Content
            className="site-layout-background"
            style={{
              margin: '24px 16px',
              padding: 24,
              minHeight: 280,
            }}
          >
           {this.props.children}
          </Content>
        </Layout>
      </Layout>
     </div>
    );
  }
}



export default withRouter(Admin);